<!--合约详情-->
<template>
  <div class="bg" @viewappear="viewappear" @rightBtn="rightBtn">
    <scroller class="scroller bg1" :show-scrollbar="false">
      <div class="wrapper" v-if="isShow">
        <div class="row acenter plpr40">
          <!-- 合约网格 -->
          <text class="font32 text1">{{ T(detailData.strategyName) }}</text>
          <text class="font24 text3 ptop5" v-if="detailData.strategyCode">{{ '  '+detailData.strategyCode }}</text>

          <div class="all"></div>
          <text class="font28 text3">{{ getStateStr(detailData.endType) }}</text>
        </div>

        <div class="row acenter plpr40">
          <text class="font20 text3">{{parseTime1(detailData.startTime)+'-'+parseTime1(detailData.endTime)+'（'+getExecuteTime(detailData.startTime, detailData.endTime)+')' }}</text>

          <div class="all"></div>
          <text class="font20 text3" v-if="detailData.isOpenFollow">{{ T("开放跟单") }}</text>
        </div>
        
        <div class="height20"></div>
        <div class="row plpr40">
          <text class="font28 text2">{{getExchangeName()}}</text>
          <div :class="['short-long', Config.upDownBg(contract_num, 'short-long-red', 'short-long-green')]">
            <text :class="['font20',Config.upDownFont(contract_num)]">{{ getMoreOrShort()}}</text>
          </div>
        </div>
        <div class="height20"></div>
        <div class="row plpr40">
          <text class="font24 text3">{{ T("总投入")+"("+tradePairs.investCoin+")" }}</text>
          <div class="all"></div>
          <text class="font24 text3">{{ T("总收益")+"("+tradePairs.investCoin+")" }}</text>
        </div>
        <div class="height12"></div>
        <div class="row plpr40">
          <text class="font32 text2">{{ tradePairs.investCoinnNum }}</text>
          <div class="all"></div>
          <text :class="['font32', Config.upDownFont(detailData.realEarnings)]">{{getValueDelete(tradePairs.investCoin,detailData.realEarnings)+'('+detailData.realEarningsRate+'%)'}}</text>
        </div>

        <div class="height40"></div>
        <div class="line bg3"></div>
        <div class="height40"></div>

        <div class="cell-run">

          <div class="cell-run-left all">
            <text class="font24 text3">{{T('账户权益')+'('+tradePairs.investCoin+')'}}</text>
            <div class="height12"></div>
            <text class="font24 text2">{{isShowZero(tradePairs.investCoin, '0')}}</text>
          </div>

          <div class="cell-run-left all">
            <text class="font24 text3">{{T('持仓盈亏')+'('+tradePairs.investCoin+')'}}</text>
            <div class="height12"></div>
            <text :class="['font24', Config.upDownFont(detailData.floatEarnings)]">{{getAddStr(detailData.floatEarnings)}}</text>
          </div>

          <div class="cell-run-right all">
            <text class="font24 text3">{{T('总年化')}}</text>
            <div class="height12"></div>
            <text :class="['font24', Config.upDownFont(detailData.yearIncome)]">{{getAddStr(detailData.yearIncome)+'%'}}</text>
          </div>
        </div>

        <div class="height28"></div>
        <div class="cell-run">

            <div class="cell-run-left all">
              <div class="row acenter" @click="questionClick('开仓阈值')">
                <text class="font24 text3">{{T('开仓阈值')+"  "}}</text>
                <LImage class="img-question" :src="Config.img('wenhao.png')"></LImage>
              </div>
              <div class="height12"></div>
              <text class="font24 text2">{{tradePairs.openThreshold+"%"}}</text>
            </div>

            <div class="cell-run-left all">
            </div>

            <div class="cell-run-right all">
            </div>
        </div>
        

        <div class="height40"></div>
        <div class="line bg3"></div>
        <div class="height40"></div>
        <!-- 套利记录 -->
        <text class="font30 text1 plpr40">{{T("套利记录")}}</text>
        <div class="height20"></div>
        
        <div class="cell-run">

            <div class="cell-run-left all">
              <text class="font24 text3">{{T('累计开仓')}}</text>
              <div class="height12"></div>
              <text class="font24 text2">{{detailData.finishBuyCount}}</text>
            </div>

            <div class="cell-run-left all">
              <text class="font24 text3">{{T('累计平仓')}}</text>
              <div class="height12"></div>
              <text class="font24 text2">{{detailData.finishSellCount}}</text>
            </div>

            <div class="cell-run-right all">
              <text class="font24 text3">{{T('交易数')}}</text>
              <div class="height12"></div>
              <text class="font24 text2">{{detailData.finishBuySellCount}}</text>
            </div>
        </div>

        <!-- 收益分析 -->
        <div class="height40"></div>
        <div class="line bg3"></div>
        <div class="height40"></div>
        <div class="row acenter plpr40">
          <text class="font30 text1">{{T("收益分析")}}</text>
          <div class="all"></div>
          <div class="img-earning-rate main1"></div>
          <text class="font24 text2">{{T("总收益率")}}</text>
        </div>
        <div class="height20"></div>
        <WeexLineChart class="lineChart" :data="lineChartData"></WeexLineChart>
        <div class="height40"></div>
        <!-- 止盈止损 -->
        <text class="font30 text1 plpr40">{{T("止盈止损")}}</text>
        

        <div class="height28"></div> 

        <div class="cell-run">
          <div class="cell-run-left all">
            <text class="font24 text3">{{T('止盈率')}}</text>
            <div class="height12"></div>
            <text class="font24 text2">{{stopProfit}}</text>
          </div>

          <div class="cell-run-left all">
            <text class="font24 text3">{{T('止损率')}}</text>
            <div class="height12"></div>
            <text class="font24 text2">{{stopLoss}}</text>
          </div>

          <div class="cell-run-right all">
            <text class="font24 text3">{{T('自动终止时间')}}</text>
            <div class="height12"></div>
            <text class="font24 text2">{{stopTime}}</text>
          </div>
        </div>
      </div>
    </scroller>

    <!-- 菜单 -->
    <div class="menu" v-if="showMenu" @click="hideClick">
      <div class="meun-content bg3">
        <text class="font24 text2 meun-text" v-for="(item, index) in menus" v-bind:key="index" @click="menuClick(item)">{{T(item)}}</text>
      </div>
    </div>
  </div>
</template>

<script>
import navigator from "@/_js/navigator";
import modal from "@/_js/modal";
import math from "@/_js/math";
import Config from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");
import weexHttp from "@/_js/https"; ;

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("历史详情"));
weexFunction.setRightBtn(T('功能'));
export default {
  data() {
    return {
      T: T,
      Config: Config,
      math:math,
      menus:undefined, //菜单
      contract_num: 10,
      executeId: "", //执行id
      isShow:false,
      lineChartData: undefined,//折线数据
      detailData: undefined, //执行信息
      redisMap: undefined, //数据库信息
      configMap: undefined, //执行配置
      followMimic: false, //turn 模拟盘开放跟单
      account: undefined,//用户合约信息
      tradePairs: undefined,//用户api信息
      positionMap:undefined,
      volume:undefined,//持仓数量
      costOpen: undefined,//开仓均价
      result: undefined,//历史详情特有用于计算交易数

      stopProfit: '', //止盈
      stopLoss: '', //止损
      stopTime: '', //自动终止时间

      buyPrice1:undefined, //买1价格
      sellPrice1:undefined, //卖1价格

      receiver:undefined,
      showMenu:false, //显示功能
      menus : ['消息', '参数', '成交记录'],//菜单列表
    };
  },

  mounted() {

    this.executeId = navigator.getParam("executeId");
    Config.init(()=>{
      this.httpExecuteDetail();
    },[Config.OPT_UP_DOWN]);
  },

  methods: {
    
    /*************************************************通信触发*/
    //完全显示
    viewappear() {
      this.httpExecuteDetail();
    },

    //右按钮触发
    rightBtn() {
      this.showMenu = !this.showMenu;
    },

    /********************************** HTTP*/
    //http执行详情
    httpExecuteDetail() {
      
      this.detailData = undefined;
      var param = { executeId: this.executeId};
      weexHttp.post("strategyV3/executeHistoryDetail",param,true,(data) => {

          if (data.status == 200) {
            
            this.detailData = data.data.executeHistoryDetail;
            this.configMap =this.detailData.config;
            this.tradePairs = this.configMap.tradePairs[0];
            this.tradePairs.openThreshold = math.cheng(this.tradePairs.openThreshold,"100",2, 2);//开仓阈值需要*100
            this.result = this.detailData.result;
            this.positionMap = this.result.pairs[0].data.position;
            this.account = this.result.pairs[0].data.account;
            //交易数量
            
            this.detailData.finishBuyCount = this.result.pairs[0].data.finishOpenCount ? this.result.pairs[0].data.finishOpenCount : '0';
            this.detailData.finishSellCount = this.result.pairs[0].data.finishCloseCount ? this.result.pairs[0].data.finishCloseCount : '0';
            this.detailData.finishBuySellCount = math.jia(this.detailData.finishBuyCount, this.detailData.finishSellCount);
            //止盈止损
            this.configMap.stopProfit = this.configMap.stopProfit?this.configMap.stopProfit:'';
            this.stopProfit = this.configMap.stopProfit.length > 0 ? (math.cheng(this.configMap.stopProfit, '100') + '%') : '--';
            this.configMap.stopLoss = this.configMap.stopLoss?this.configMap.stopLoss:'';
            this.stopLoss = this.configMap.stopLoss.length > 0 ? (math.cheng(this.configMap.stopLoss, '-100') + '%') : '--';
            this.configMap.stopTime = this.configMap.stopTime?this.configMap.stopTime:'';
            this.stopTime = this.configMap.stopTime.length > 0 ? this.parseTime1(math.getNumber(this.configMap.stopTime)) : '--';
            //交易币、本币、投资币
            this.configMap.inverstCoin = this.configMap.tradePairs[0].investCoin.toUpperCase();
            this.configMap.counterCoin = this.configMap.tradePairs[0].counterCoin.toUpperCase();
            this.configMap.baseCoin = this.configMap.tradePairs[0].baseCoin.toUpperCase();

          
            if(this.tradePairs.investType=="0"){
              this.contract_num = 10;
            }else if(this.tradePairs.investType=="1"){
              this.contract_num = -10
            }else if(this.tradePairs.investType=="2"){
              this.contract_num = 0
            }
            
        
            //收益曲线
            var realEarningsLine = this.result.pairs[0].data.realEarningsLine;
            this.lineChartData = realEarningsLine ? realEarningsLine.items : [];


            this.isShow = true;
            
            //交易币、本币 数量/冻结率
            // this.redisMap.baseCoinTotal = math.xiaoshu(this.redisMap.baseCoinTotal, math.getCoin(this.redisMap.baseCoin));
            // this.redisMap.counterCoinTotal = math.xiaoshu(this.redisMap.counterCoinTotal, math.getCoin(this.redisMap.counterCoin));
            // var baseCoinFreezRate = math.chu(this.redisMap.baseCoinFreez, this.redisMap.baseCoinTotal, 4, 2);
            // var counterCoinFreezRate = math.chu(this.redisMap.counterCoinFreez, this.redisMap.counterCoinTotal, 4, 2);
            // this.redisMap.baseCoinFreezRate = math.cheng(baseCoinFreezRate, '100', 2, 2);
            // this.redisMap.counterCoinFreezRate = math.cheng(counterCoinFreezRate, '100', 2, 2);

            //浮动盈亏
            // var xiaoshu = math.getCoin(this.redisMap.inverstCoin);
            // var profitLoss;
            // if (this.redisMap.inverstCoin == this.redisMap.baseCoin) {
            //   var price = math.jian(this.redisMap.curPrice, this.redisMap.costPrice);
            //   profitLoss = math.cheng(price, this.redisMap.counterCoinTotal, xiaoshu, 2);
            // } else {
            //   var cost = math.chu(this.redisMap.baseCoinTotal, this.redisMap.costPrice); //成本价
            //   var cur = math.chu(this.redisMap.baseCoinTotal, this.redisMap.curPrice); //当前价
            //   profitLoss = math.jian(cost, cur, xiaoshu, 2);
            // }
            // this.redisMap.profitLoss = profitLoss;

            //浮动盈亏率
            // var profitLossRate;
            // if (this.redisMap.inverstCoin == this.redisMap.baseCoin) {
            //   var price = math.jian(this.redisMap.curPrice, this.redisMap.costPrice);
            //   profitLossRate = math.chu(price, this.redisMap.costPrice, 4, 2);
            // } else {
            //   var price = math.jian(this.redisMap.costPrice, this.redisMap.curPrice);
            //   profitLossRate = math.chu(price, this.redisMap.costPrice, 4, 2);
            // }
            // profitLossRate = math.cheng(profitLossRate, '100', 2);
            // this.redisMap.profitLossRate = profitLossRate
            
          } else {
            modal.toast(data.msg);
          }
        }
      );
    },

    /********************************** GET*/
    //获取+字符串
    getAddStr(value) {
      value = math.xiaoShuDelete0(value);
      value = math.addJia(value);
      return value;
    },

    //获得策略状态字符
    getStateStr(states) {
      if (states == "STOP_HAND") {
        return T("手动终止");
      }
      if (states == "STOP_PROFIT") {
        return T("已止盈");
      }
      if (states == "STOP_LOSS") {
        return T("已止损");
      }
      if (states == "STOP_TIME") {
        return T("已定时终止");
      }
      if (states == "STOP_AUTO") {
        return T("已自动终止");
      }
      if (states == "FORCE_CLOSE") {
        return T("已强平");
      }
    },

    //获交易所名称
    getExchangeName() {
      var remark = this.detailData.remark && this.detailData.remark.length ? ('·' + this.detailData.remark) : '';
      return (this.tradePairs.apiName + remark + '（' + this.tradePairs.counterCoin + T('永续')+'/' + this.tradePairs.baseCoin + '）');
    },

    //担保资产率，强迫价
    isShowZero(coin,value) {


      if (coin == '%') {
        return math.getNumber(value) == 0 ? '--' : value + '%';
      }

      value = math.xiaoshu(value, math.getCoin(coin),2);
      return  math.getNumber(value) == 0 ? '--' : value;
    },

    //时间转换(年月日时分)
    parseTime1(timestamp) {
      var time = new Date(Number(timestamp));

      var year = time.getFullYear();

      var month = time.getMonth() + 1;
      month = month < 10 ? "0" + month : month;

      var day = time.getDate();
      day = day < 10 ? "0" + day : day;

      var hour = time.getHours();
      hour = hour < 10 ? "0" + hour : hour;

      var minute = time.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;

      return year + "/" + month + "/" + day + " " + hour + ":" + minute;
    },

    //获取执行时长
    getExecuteTime(startTime, endTime) {
      var disTime = endTime - startTime;
      var day = Math.floor(disTime / 86400000);
      var hour = Math.floor((disTime % 86400000) / 3600000);
      var min = Math.floor(((disTime % 86400000) % 3600000) / 60000);
      return day + T("天") + hour + T("时") + min + T("分");
    },

    getMoreOrShort(){
      var investType = this.tradePairs.investType; //0是做多，1 做空, 2 未知
      var type = math.toString(investType);
      if(type=="0"){
        return T('做多')+this.tradePairs.leverRate+'X';
      }

      if(type=="1"){
        return T('做空')+this.tradePairs.leverRate+'X';
      }

      if(type=="2"){
        return T('双向')+this.tradePairs.leverRate+'X';
      }
    },

    getMoreOrShort1(){
      var type = this.tradePairs.investType; //0是做多，1 做空, 2 未知
      if(type=="0"){
        return T('多');
      }

      if(type=="1"){
        return T('空');
      }

      if(type=="2"){
        return T('双向');
      }
    },


    /********************************** 更新的方法*/
    //更新滑条
    upSlideBar() {
      var starStr = "0";
      var endStr =
        math.getNumber(this.maxInvest) > math.getNumber(this.moneyNum)
          ? this.moneyNum
          : this.maxInvest;
      endStr = endStr + "";

      var ratio = this.investNum.length
        ? math.chu(this.investNum, endStr, 2, 2)
        : "0";
      ratio = math.getNumber(ratio) > 1 ? "1" : ratio;
      ratio = math.getNumber(endStr) == 0 ? 0 : ratio;

      var a = { starStr: starStr, endStr: endStr, ratio: ratio };

      this.$refs.WeexSlideBar.upSlide(a);
    },

    /********************************** 回调*/

    //总投入资金-输入改变
    onInput(e) {
      this.upSlideBar();
    },

    /********************************** 点击事件 */
    //弹框
    questionClick(click) {
      if(click =="强平价"){
        modal.alert(T("预估担保资产率下降到0%时的价格，实际发生强平的价格以交易所为准。"));
        return;
      }
      if(click =="担保资产率"){
        modal.alert(T("担保资产率越低风险越高，当担保资产率下降至0%是将触发交易所强平。"));
        return;
      }
      if(click =="开仓阈值"){
        modal.alert(T("当担保资产率下降到此值之下时，策略将暂停开仓动作，可根据风险承受能力自主调节。"));
        return;
      }
      // if(click =="自动转出"){
      //   modal.alert("自动转出");
      //   return;
      // }
    },

    //根据coin截取长度
    getValueDelete(coin,value) {
      if(coin.toUpperCase() =="BTC"){
       var length = 6;
      }else if(coin =="%"){
       var length = 2;
      }else{
       var length = 4;
      }
      
      return math.xiaoshu(value,length, 2);
    },

    assetsRateClick(){
      modal.alert("没钱了");
    },

    //隐藏
    hideClick(){
      this.showMenu = false;
    },

    //菜单点击
    menuClick(item){
      this.hideClick();

      if (item == '消息') {

        navigator.open(T('策略消息'), 'strategy/StrategyNotice', {stId:this.executeId});
        return;
      }
      
      if (item == '成交记录') {
        var param = {'executeId':this.executeId,
        'counterCoin':this.tradePairs.counterCoin,
        'baseCoin':this.tradePairs.baseCoin,
        'contract':true};
        navigator.openNative('tradeRecord',param);
        return;
      }

      var states = this.detailData.states;
      if (states == "STARTING" || states == "STOPING" ) {
        modal.toast('请勿频繁操作');
        return;
      }

      if (item == '参数') {

        var param = {'configMap':this.configMap,
                    // 'followMap':this.followMap,
                    'isOpenFollow':this.detailData.isOpenFollow,
                    // 'followMimic':this.followMimic
                    };
        navigator.open('', 'runContract/HCRunParam',param);
      }
    },

  },
};
</script>

 
<style src="@/_css/style.css"></style>
<style scoped>
/* =========================公共样式 */
.all {
  flex: 1;
}

.ptop5 {
  padding-top: 5px;
}

.th68{
  height: 68px;
  line-height: 68px;
}

.plpr40 {
  padding-left: 40px;
  padding-right: 40px;
}
.mlmr20 {
  margin-left: 20px;
  margin-right: 20px;
}

.width6{
  width: 6px;
}

.height12 {
  height: 12px;
}

.height28 {
  height: 28px;
}

.height20 {
  height: 20px;
}

.height40 {
  height: 40px;
}

.line {
  margin-left: 40px;
  margin-right: 40px;
  width: 670px;
  height: 2px;
}

.bg {
  width: 750px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.scroller {
  width: 750px;
  z-index: 9;
}
.wrapper {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 750px;
  flex-direction: column;
}

/* =========================基本样式 */
.tips-bg {
  background-color: rgba(248, 84, 84, 0.1);
  height: 72px;
  margin-left: 20px;
  margin-right: 20px;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 8px;
}
.tips-text{
  color: #F85454;
}

.img-right{
  width: 10px;
  height: 16px;
}

.img-question{
  width: 24px;
  height: 24px;
}

.lineChart{
  margin-top: 40px;
  margin-left: 40px;
  width: 670px;
  height: 450px;
}

.img-earning-rate{
  width: 20px;
  height: 12px;
  border-radius: 2px;
  margin-right: 12px;
}

.short-long-bg{
  border-radius: 4px;
  background-color: rgba(0, 173, 136, 0.1);
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.short-long{
  border-radius: 4px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.short-long-green{
  background-color: rgba(0, 173, 136, 0.1);
}
.short-long-red{
  background-color:  rgba(248, 84, 84, 0.1);
}

.short-long-text{
  color: #00AD88;
}

.cell-run {
  flex-direction: row;
  justify-content: space-between;
  padding-left: 40px;
  padding-right: 40px;
}
.cell-run-left{
  flex-direction: column;
}
.cell-run-right {
  flex-direction: column;
  align-items: flex-end;
}
.buySell{
  width: 670px;
  height: 100px;
}

/*********************************** 菜单*/
.menu{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.meun-content {
  position: absolute;
  width: 204px;
  border-radius: 4px;
  
  padding-top: 20px;
  padding-bottom: 20px;

  top: 0;
  right: 0;
}
.meun-text {
  height: 80px;
  line-height: 80px;
  width: 204px;
  text-align: center;
}
</style>